<template>
	<!-- index主页头部导航栏 -->
	<view class="Content">
		<!-- null -->
		<view class="box">
			<!-- left -->
			<view class="Content-left">
				<getLocation></getLocation>
			</view>
			<!-- center -->
			<view class="Content-center">
			<!-- 搜索框 -->
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
				 style="background-color: #eee;"/>
			</view>
			<!-- right -->
			<view class="Content-right">
				<!-- 消息 / 扫一扫 -->
				<!-- <uni-icons type="scan" size="20" style="margin: 6px;"></uni-icons> -->
				<ScanCode></ScanCode>
				<uni-icons type="email-filled" size="20" @click="messages"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import getLocation from '@/compopents/getLocation.vue'
	import ScanCode from '@/compopents/ScanCode/ScanCode.vue'
	export default {
		components:{
			getLocation,
			ScanCode
		},
		data() {
			return {
				city: '定位中',
				searchValue: '123123',
				latitude: '', //纬度
				longitude: '', //经度
			};
		},
		mounted() {
		//为确保回调函数能正常使用，先保存在一个变量中
		let _this = this  
		//获取位置
			uni.getLocation({
				success:({
					longitude,
					latitude
					}) => {	
					//diaoydiao调用高德地图API，把经纬度转换为地址极坐标
					uni.request({
						url:'https://restapi.amap.com/v3/geocode/regeo',
						data:{
							key:'d8bad66a4b3f6dfa309972ae74a089ae',
							location:longitude + ',' + latitude,
						},
						success:(res) => {
							this_.city = res.data.regeocode.addressComponent.streetNumber.street +
							res.data.regeocode.addressComponent.streetNumber.number
							console.log(res.data.regeocode.addressComponent)
						}
						
					})
				}
			})	
		},
		onLoad() {

		},
		methods:{
			messages(){
				uni.switchTab({
					url:'/pages/tabBar/messages'
				})
			},
		// 定位
		getlocation(){
			// test
			uni.showModal({
				title:'提示',
				content:'当前位置在云南昭通水富',
				showCancel:false,
			})
			this.city = '云南'
	
			
		},
		search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		},
		//过滤器
			// filters: {
			//   formatDate(val) {
			//     return dayjs(val).format("YYYY/MM/DD");
			//   },
			// },	
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		
		}
	}
</script>

<style lang="scss">
.Content{

	.box{
		margin-top: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		.Content-left{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.city{
				display: flex;
				font-size: 10px;
			}
		}
		.Content-center{
			display: flex;
			align-items: center;
			background-color: #eee;
			border-radius: 10px;
			padding: 8px;
			height: 14px;
			flex: 2;
			input{
				font-size: 10px;
			}
		}
		.Content-right{
			margin-right: 8px;
			display: flex;
			align-items: center;
		}
	}
	
}
</style>
